<template>
    <div class="page-content">
        <div class="d-flex">
            <edit-tree v-model="currentCategory" apiPrefix="/manager/device-category" :newFields="categoryFields" class="tree mr-4 p-4"
                @currentChange="selectCategory" title="分类"></edit-tree>

            <entity-manager apiPrefix="/manager/device" :fields="fields" :queryFields="queryFields" ref="entityManagerRef" class="flex-auto"
                :params="params" operationsWidth="200px">
                <template #rowButtons="{ row }">
                    <el-link type="danger" v-show="row.status == 1 || row.status == 2" class="mr-2" @click="offline(row)"
                        v-perm="'update'">下线</el-link>
                    <el-link type="success" v-show="row.status == 0 || row.status == 3 || row.status == 2" class="mr-2"
                        @click="publish(row)" v-perm="'update'">发布</el-link>
                    <el-link type="primary" v-show="!row.isSuperAdmin" @click="goEdit(row)" class="mr-2" v-perm="'update'">编辑</el-link>
                    <el-link type="primary" @click="goData(row)" class="mr-2">工况</el-link>
                    <el-link type="danger" v-show="!row.isSuperAdmin" @click="doDelete(row)" class="mr-2" v-perm="'delete'">删除</el-link>
                </template>
            </entity-manager>
        </div>

        <full-panel v-model="visible" title="设备工况" @close="visible = false">
            <device-data :device="currentDevice" />
        </full-panel>
    </div>
</template>

<script setup>
    import fullPanel from '@/components/full-panel.vue'
    import deviceData from './device-data.vue';
    import EditTree from '@/components/edit-tree/index.vue'
    import { ElMessage } from 'element-plus';
    import * as _ from 'lodash'
    import https from '@/utils/https'

    const categoryFields = [
        { label: '分类名称', prop: 'name', required: true }
    ]
    const fields = [
        { label: '所属网关', prop: 'gatewayId', required: true, width: '200px', type: 'select', options: loadGateways, converter: (val, row) => row.gatewayName },
        { label: '模型', prop: 'modelId', required: true, width: '200px', type: 'select', options: loadModels, converter: (val, row) => row.modelName },
        { label: '设备分类', prop: 'categoryId', required: true, width: '200px', type: 'treeSelect', options: loadCategory, converter: (val, row) => row.categoryName },
        { label: '设备编号', prop: 'code', required: true, unique: true, width: '200px' },
        { label: '设备名称', prop: 'name', required: true },
        {
            label: '设备状态', prop: 'status', width: '80px', align: 'center', converter: val => {
                if (!val) {
                    return '草稿'
                } else if (val == 1) {
                    return '已发布'
                } else if (val == 2) {
                    return '编辑中'
                } else {
                    return '已下线'
                }
            },
            needNew: false
        },
        { label: '在线状态', prop: 'online', width: '80px', converter: val => (!val || val == 'false') ? '离线' : '在线', needNew: false, align: 'center' },
        { label: '创建时间', prop: 'createTime', width: '200px', needNew: false },
    ]
    const entityManagerRef = ref()
    const params = ref({})
    const queryFields = [
        { label: '关键字', prop: 'key' },
    ]
    const currentCategory = ref({})

    function goEdit(row) {
        entityManagerRef.value.goEdit(row)
    }

    function doDelete(row) {
        entityManagerRef.value.doDelete(row)
    }

    function loadGateways() {
        return https.post('/manager/gateway/query')
    }

    function loadModels() {
        return https.post('/manager/device-model/query')
    }

    function loadCategory() {
        return https.get('/manager/device-category/tree')
    }

    function publish(row) {
        https.get('/manager/device/publish', { id: row.id }).then(resp => {
            ElMessage.success('操作成功')
            row.status = 1
        })
    }

    function offline(row) {
        https.get('/manager/device/offline', { id: row.id }).then(resp => {
            ElMessage.success('操作成功')
            row.status = 3
        })
    }

    function selectCategory(category) {
        params.value.categoryId = category.id
        entityManagerRef.value.reload()
    }

    const currentDevice = ref()
    const visible = ref(false)
    function goData(row) {
        currentDevice.value = row
        visible.value = true
    }
</script>

<style lang="scss" scoped>
    .tree {
        width: 300px;
        height: calc(100vh - 120px)
    }
</style>